<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>资源管理系统</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="./css/x-admin.css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
 <style>
            iframe{
                width: 100%;
                height: 100%;
            }
        </style>
</head>
<body>

<div class="layui-layout layui-layout-admin">
  <div class="layui-header header header-demo">
    <div class="layui-main">
    <div class="admin-logo-box">
				<a class="logo" href="http://www.sucaihuo.com" title="logo">CRM系统</a>
				<div class="larry-side-menu">
					<i class="fa fa-th-large" aria-hidden="true"></i>
				</div>
			</div>
            
    
      <ul class="layui-nav" lay-filter="">
      	<li class="layui-nav-item">
	         <a href="./Userchecks.html" title="签到记录">
	              <i class="layui-icon" style="top: 1px;">签到记录</i>
	         </a>
        </li> 
            <button type="button" id="qd" onclick="qianDao()" class="layui-btn">签到</button>
			<button type="button" id="qt" onclick="qianTui()" class="layui-btn">签退</button>  
        <li class="layui-nav-item"><img src="./images/logo.png" class="layui-circle" style="border: 2px solid #A9B7B7;" width="35px" alt=""></li>
              
        <li class="layui-nav-item">
			
        	<a  href="javascript:;"><span id="username"></span></a>
						<dl class="layui-nav-child">
							<!-- 二级菜单 -->
							<dd>
								<a href="">个人信息</a>
							</dd>
							<dd>
								<a href="">切换帐号</a>
							</dd>
							<dd>
								<a href="./login.html"><span id="out">退出</span></a>
							</dd>
						</dl></li>
        <li class="layui-nav-item x-index"><a href="/">前台首页</a></li>
      </ul>
    </div>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul id="left_nav" class="layui-nav layui-nav-tree"  lay-filter="test">
      </ul>
      
    </div>
  </div>
  
  <div class="layui-body" style="overflow-y: hidden;">
    <!-- 内容主体区域 -->
    <div class="layui-tab" lay-filter="demo" lay-allowClose="true">
      <ul class="layui-tab-title">
      </ul>
      <div class="layui-tab-content" >
      </div>
    </div>
  </div>
  
  
</div>
<script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
<script src="layui/layui.js"></script>
<script>
var $;
layui.use(['element','layer'], function(){
      $ = layui.$;
      var element = layui.element 
      ,layer = layui.layer;
        var base="http://localhost:8763"; 
        var get_nav=base+"/sys/menu/list";
        var layer;
   
    $(function() {
	network();
    })
   $("#qt").hide();
   var uname=localStorage.getItem("uname");
		var uid=localStorage.getItem("uid");
   $.post("isQianDao",{
				UserId:uid
				,CheckState:'已签到'
				,UserName:uname
				,IsCancel:'否'
				},function(res){
					if(res.code=="0"){
						
					}else{
						
						 $("#qt").show();
						 $("#qd").hide();
					}
				},"json");

function FrameWH() { 
    var h = $(window).height() - 164;
    //console.log("高度问题=="+h);
    $("iframe").css("height", h + "px");
}

function network(){

var roleNames=localStorage.getItem("roleNames");
var uname=localStorage.getItem("uname");
				$("#username").html(uname);
  $.ajax({
      data: {id:"0",name:roleNames},
      url:"findCategoryJson",  
      type: "get",
      contentType: "application/json",
      dataType: 'json',
      async: true,
      success: function(res) {
        console.log(res);
        if (res!=null) {
            console.log("请求数据成功");
              console.log(res);
            loadnav(res);
            
        } else{
            layer.msg('暂无数据');
        }
      },
      error:function() { 
        layer.msg("请求失败！");
      } 
    });        
}
function loadnav(res) {
    
    for (var i=0;i<res.length;i++) {
        var  first_menu=res[i];
         var  childMenus=first_menu.children; 
         //console.log("子菜单=="+JSON.stringify(childMenus));
         if(childMenus==null||childMenus==undefined||childMenus==""){
             //console.log("没有子菜单=="+first_menu.title);
             loadTopMenu(first_menu);
         }else{
              //console.log("有子菜单=="+first_menu.title);
              loadHasChildMenu(first_menu);
          }
    }
   //列表添加完后再次执行渲染
   xuanran();
}
//加载带有子菜单的
function loadHasChildMenu(data){
    console.log(data);
    var fragment = document.getElementById("left_nav");
    var list = document.createElement('li');
    list.className="layui-nav-item";
    var child_one_Html='<a href="javascript:;">'+data.title+'</a>';
    var childmenus=data.children;
    var child_two_Html='<dl class="layui-nav-child layui-nav-itemed">';
    var childHtmls="";
    for (var i=0;i<childmenus.length;i++) {
        var childmenu=childmenus[i];
        //console.log("1.=多级菜单列表=="+childmenu.name+"=="); data-title
        var childHtml='<dd><a class="site-demo-active" data-menuId='+childmenu.id+' data-src='+childmenu.path+' data-title='+childmenu.title+'>'+childmenu.title+'</a></dd>';
        childHtmls+=childHtml; 
         
    }
    child_two_Html +=childHtmls+'</dl>';
    list.innerHTML=child_one_Html+child_two_Html;
    fragment.appendChild(list);
    
    //console.log("2.=多级菜单列表加载完毕");
}
//加载顶级菜单(没有子菜单)
function loadTopMenu(data){
    var fragment = document.getElementById("left_nav");
    var list = document.createElement('li'); 
    list.className="layui-nav-item";
//aa
    list.innerHTML='<a class="site-demo-active" data-menuId='+data.id+' data-src='+data.path+'>'+data.title+'</a>';
    fragment.appendChild(list);
    //console.log("1.=顶级菜单列表加载完毕"); 
}
function xuanran() {
    layui.use(['element','layer'], function(){
      var element = layui.element;
      layer=layui.layer;
      
      var layFilter = $("#left_nav").attr('lay-filter');
      element.render('nav', layFilter); 
      
      var active = {
        //在这里给active绑定几项事件，后面可通过active调用这些事件
        tabAdd: function (url, id, name) {
            //新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
            var body_url=""+url+"";
            console.log("要切换的页面地址="+body_url);
            element.tabAdd('demo', {
                title: name,
                content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + body_url + '"></iframe>',
                id: id //规定好的id
            })
            FrameWH();  //计算ifram层的大小
        },
        tabChange: function (id) {
            //切换到指定Tab项
            element.tabChange('demo', id); //根据传入的id传入到指定的tab项
        },
        tabDelete: function (id) {
            element.tabDelete("demo", id);//删除
        }
      };      
      // //当点击有site-demo-active属性的标签时，即左侧菜单栏中内容 ，触发点击事件
      $('.site-demo-active').on('click', function () {
           var dataid = $(this);
           if ($(".layui-tab-title li[lay-id]").length <= 0) {
               //如果比零小，则直接打开新的tab项
               //console.log("1.没有tab页，新建tab页");
               console.log("2.没有tab页，新建tab页=="+dataid.text()+"=="+dataid.attr("data-menuId")+"==="+dataid.attr("data-title"));
               active.tabAdd(dataid.attr("data-src"), dataid.attr("data-menuId"),dataid.attr("data-title"));
           } else {
              //否则判断该tab项是否以及存在
              var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
              $.each($(".layui-tab-title li[lay-id]"), function () {
                  //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                  if ($(this).attr("lay-id") == dataid.attr("data-menuId")) {
                    console.log("如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开");
                    isData = true;                     
               }
              })
              if (isData == false) {
                //标志为false 新增一个tab项
                console.log("新增一个tab项")
                active.tabAdd(dataid.attr("data-src"), dataid.attr("data-menuId"),dataid.attr("data-title"));
              }
         }
        //最后不管是否新增tab，最后都转到要打开的选项页面上
        active.tabChange(dataid.attr("data-menuId"));
      });
    })
    console.log("==列表添加完后再次执行渲染");
}


	$('#out').on('click', function () {
    	var result = confirm("确定要退出吗？");
		if(result){
			$.post("tologout",{},function(res){},"json");
		}
    });
})
		var uname=localStorage.getItem("uname");
		var uid=localStorage.getItem("uid");
		function qianDao(){
			$("#qt").show();
			$("#qd").hide();
			$.post("qianDao",{
				UserName:uname
				,UserId:uid
				,IsCancel:'否'
				,CheckState:'已签到'
				},function(res){
					if(res.code=="0"){
						layer.msg(res.msg);
					}else{
						layer.msg(res.msg);
					}
				},"json");
		}
		function qianTui(){
		    layer.confirm('确定要签退吗?', function(index){
		     
		      //$("#qd").show();
			//$("#qt").hide();
			$.post("geRenQianTui",{
				UserId:uid
				,CheckState:'已签退'
				,UserName:uname
				,IsCancel:'是'
				},function(res){
					if(res.code=="0"){
						layer.msg(res.msg);
					}else{
						layer.msg(res.msg);
					}
				},"json");
		    });
			
			
		}
</script>  
</body>
</html>